<template>
    <!-- 中间部分 -->
    <div class="m-padding-tb-big" id="app">
        <!-- 创建中间容器 防止左右铺满 -->
        <div class="ui container">
            <!-- 创建分段 首部分段 -->
            <Bar title="总计" count="14"/>

            <!-- 记录一整年的文章 -->
            <h2 class="ui center aligned header">2019</h2>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item" v-for="(article, index) in articles" :key="index">
						<span>
							<i class="teal mini circle icon" style="margin-right: 8px !important;"></i> {{ article.title }}
							<div class="ui basic teal left pointing label m-padding-tb-mini" style="margin-left: 10px !important;"> {{ article.time }}</div>
						</span>
                    <div class="ui orange label">{{ article.tag }}</div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import Bar from "../components/Bar";
    export default {
        name: "Archives",
        components: {
            Bar
        },
        data() {
            return {
                articles: [
                    {
                        title: "测试文章",
                        time: "10月19日",
                        tag: "原创",
                    },
                    {
                        title: "测试文章",
                        time: "10月19日",
                        tag: "原创",
                    },
                    {
                        title: "测试文章",
                        time: "10月19日",
                        tag: "原创",
                    },
                    {
                        title: "测试文章",
                        time: "10月19日",
                        tag: "原创",
                    },
                    {
                        title: "测试文章",
                        time: "10月19日",
                        tag: "原创",
                    },
                ]
            }
        },
        filters: {
            // 文章日期 格式过滤器函数
            datetimeFormat(input) {
                let datetime = new Date(input);
                let y = datetime.getFullYear();
                let m = datetime.getMonth() + 1;
                let d = datetime.getDay();
                return `${y}-${m}-${d}`;
            }
        }
    }
</script>

<style scoped>

</style>
